<template>
    <div>
        <dv-decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
    </div>
</template>

<script lang="ts" setup>
import { VXETable, VxeTableInstance, VxeColumnPropTypes, VxeFormPropTypes, VxeFormItemPropTypes, VxeTableEvents } from 'vxe-table'

interface RowVO {
    id: number
    name: string
    nickname: string
    role: string
    sex: string
    sex2: string[]
    num: number
    num1: number
    age: number
    flag1: boolean
    address: string
    date12: string
    date13: string
    date3: string
    checkedList: any[]
}
const searchData = reactive({
    Name: '', // 给属性提供初始值，这里是空字符串
    Department: '',
    Role: '',
    UserStatus: '', // 布尔值类型是 boolean，初始值为 false
    date: '',
});
const xTable = ref<VxeTableInstance<RowVO>>()

const formData = reactive({
    name: '',
    nickname: '',
    role: '',
    sex: '',
    age: 0,
    num: 0,
    checkedList: [] as any[],
    flag1: false,
    date3: '',
    address: ''
})

const submitLoading = ref(false)
const showEdit = ref(false)
const selectRow = ref<RowVO | null>()
const tableData = ref<RowVO[]>([])

const sexList = ref([
    { label: '女', value: '0' },
    { label: '男', value: '1' }
])

const formRules = reactive<VxeFormPropTypes.Rules>({
    name: [
        { required: true, message: '请输入名称' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
    ],
    nickname: [
        { required: true, message: '请输入昵称' }
    ],
    sex: [
        { required: true, message: '请选择性别' }
    ]
})

const formatterSex: VxeColumnPropTypes.Formatter<RowVO> = ({ cellValue }) => {
    const item = sexList.value.find(item => item.value === cellValue)
    return item ? item.label : ''
}

const visibleMethod: VxeFormItemPropTypes.VisibleMethod = ({ data }) => {
    return data.flag1 === 'Y'
}

const insertEvent = () => {
    Object.assign(formData, {
        name: '',
        nickname: '',
        role: '',
        sex: '',
        age: 0,
        num: 0,
        checkedList: [],
        flag1: false,
        date3: '',
        address: ''
    })
    selectRow.value = null
    showEdit.value = true
}

const editEvent = (row: RowVO) => {
    Object.assign(formData, row)
    selectRow.value = row
    showEdit.value = true
}

const cellDBLClickEvent: VxeTableEvents.CellDblclick<RowVO> = ({ row }) => {
    editEvent(row)
}

const removeEvent = async (row: RowVO) => {
    const type = await VXETable.modal.confirm('您确定要删除该数据?')
    if (type === 'confirm') {
        const $table = xTable.value
        if ($table) {
            $table.remove(row)
        }
    }
}

const submitEvent = () => {
    submitLoading.value = true
    setTimeout(() => {
        const $table = xTable.value
        if ($table) {
            submitLoading.value = false
            showEdit.value = false
            if (selectRow.value) {
                VXETable.modal.message({ content: '保存成功', status: 'success' })
                Object.assign(selectRow.value, formData)
            } else {
                VXETable.modal.message({ content: '新增成功', status: 'success' })
                $table.insert({ ...formData })
            }
        }
    }, 500)
}

setTimeout(() => {
    const list: RowVO[] = [
        { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: '0', sex2: ['0'], num: 40, num1: 40, age: 28, flag1: false, address: 'Shenzhen', date3: '', date12: '', date13: '', checkedList: [] },
        { id: 10002, name: 'Test2', nickname: 'T2', role: 'Designer', sex: '1', sex2: ['0', '1'], num: 40, num1: 20, age: 22, flag1: false, address: 'Guangzhou', date3: '', date12: '', date13: '2020-08-20', checkedList: [] },
        { id: 10003, name: 'Test3', nickname: 'T3', role: 'Test', sex: '0', sex2: ['1'], num: 4, num1: 200, age: 32, flag1: true, address: 'Shanghai', date3: '', date12: '2020-09-10', date13: '', checkedList: [] },
        { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: '1', sex2: ['0'], num: 3, num1: 30, age: 23, flag1: false, address: 'Shenzhen', date3: '', date12: '', date13: '2020-12-04', checkedList: [] },
        { id: 10004, name: 'Test5', nickname: 'T5', role: 'Designer', sex: '1', sex2: ['1'], num: 40, num1: 30, age: 26, flag1: true, address: 'Shenzhen', date3: '', date12: '', date13: '', checkedList: [] },
        { id: 10004, name: 'Test6', nickname: 'T6', role: 'Designer', sex: '1', sex2: ['1'], num: 5, num1: 30, age: 28, flag1: false, address: 'BeiJing', date3: '', date12: '', date13: '2020-09-04', checkedList: [] },
        { id: 10004, name: 'Test7', nickname: 'T7', role: 'Designer', sex: '1', sex2: ['1'], num: 40, num1: 30, age: 30, flag1: false, address: 'BeiJing', date3: '', date12: '', date13: '2020-04-10', checkedList: [] }
    ]
    tableData.value = list
}, 100)
</script>
<style scoped></style>